<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <title>Document</title>
    <style>
      /* 第三步 */

      .create {
        width: 60px;
        height: 60px;
        border: 5px solid black;
        border-radius: 50%;
        /* transparent 隐藏 */
        border-color: black transparent black transparent;
        animation: create 1s linear;
      }

      @keyframes create {
        0% {
          /* rotate 旋转 */
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      /* 隐藏 */
      .spinner {
        display: none;
      }
    </style>
  </head>
  <body>
    <h1>二维码生成器</h1>
    <!-- url  二维码的内容  -->
    <input type="text" id="url" />
    <button class="btn">生成二维码</button>
    <!-- 放置二维码 -->
    <div id="footer">
      <!-- class:"spinner"样式 -->
      <div id="spinner" class="spinner">
        <!-- 黑色圆圈旋转 -->
        <div class="create"></div>
      </div>
      <!-- 生成二维码 -->
      <div id="qrcode"></div>
    </div>
  </body>
</html>
<script>
  // 获取按钮
  let btn = document.querySelector("button");

  // 获取二维码
  let qrcode = document.querySelector("#qrcode");

  // 显示
  function showSpinner() {
    let spinner = document.querySelector("#spinner");
    spinner.style.display = "block";
    // 把该标签内容为空
    qrcode.innerHTML = "";
    // btn.setAttribute("disabled", "true");
  }

  // 隐藏;
  function noneSpinner() {
    let spinner = document.querySelector("#spinner");
    spinner.style.display = "none";
    // btn.removeAttribute("disabled");
  }

  // 生成二维码
  // console.log(qucode);
  function generateQRCode(url) {
    let qrcode = new QRCode("qrcode", {
      text: url,
      width: 300,
      height: 300,
    });
  }
  // 事件
  btn.addEventListener("click", function onsubmit(e) {
    e.preventDefault();
    showSpinner();

    let url = document.querySelector("#url").value;
    if (url === "") {
      console.log("请输入地址或文字");
    } else {
      // 显示
      showSpinner();
      setTimeout(() => {
        noneSpinner();
        generateQRCode(url);
      }, 1000);
    }
  });
</script>
